<details>: 詳細折りたたみ要素

<details>
  <summary>詳細</summary>
  何気なく見過ごしてしまうほど小さなもの。
</details>

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}

details.addEventListener("toggle", (event) => {
  if (details.open) {
    /* 要素が開いた方に切り替わった */
  } else {
    /* 要素が閉じた方に切り替わった */
  }
});

<details>
  <summary>システム要件</summary>
  <p>
    オペレーティングシステムを実行するコンピューターが必要です。コンピューターにはメモリーがあり、できれば何らかの長期保存用の記憶装置があること。入力機器と何らかの出力機器を推奨。
  </p>
</details>

<details open>
  <summary>システム要件</summary>
  <p>
    オペレーティングシステムを実行するコンピューターが必要です。コンピューターにはメモリーがあり、できれば何らかの長期保存用の記憶装置があること。入力機器と何らかの出力機器を推奨。
  </p>
</details>

<details name="requirements">
  <summary>卒業要件</summary>
  <p>
    健康、地理、歴史、経済、木工の合格点を含む 40 単位が必須です。
  </p>
</details>
<details name="requirements">
  <summary>システム要件</summary>
  <p>
    オペレーティングシステムを実行するコンピューターが必要です。コンピューターには、メモリーと、できれば何らかの長期記憶装置が必要です。入力装置および何らかの出力装置も推奨されます。
  </p>
</details>
<details name="requirements">
  <summary>採用条件</summary>
  <p>
    HTML、CSS、JavaScript、アクセシビリティ、ウェブパフォーマンス、プライバシー、セキュリティ、国際化に関する知識、そしてブロッコリーが嫌いでなければなりません。
  </p>
</details>

details {
  font:
    16px "Open Sans",
    Calibri,
    sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details:open > summary {
  background-color: #ccf;
}

<details>
  <summary>システム要件</summary>
  <p>
    オペレーティングシステムを実行するコンピューターが必要です。コンピューターには、メモリーと、できれば何らかの長期記憶装置が必要です。入力装置および何らかの出力装置も推奨されます。
  </p>
</details>